<template>
  <NavBar transparent :border="false">
    <template #left v-if="route.params.id">
      <van-icon name="arrow-left" size="20" class="action-btn" @click="handleBack" />
    </template>
    <template #right>
      <div class="header-actions">
        <van-icon name="ellipsis" size="20" class="action-btn" @click="handleMore" />
      </div>
    </template>
  </NavBar>
  <!-- 弹出层 -->
  <van-popup v-model:show="showMore" position="right" :style="{ width: '60%', height: '100%' }">
    <div class="more-wrap">
      <div class="more-header">
        <div class="more-header-item">
          <van-icon name="setting-o" size="20" />
          <span>设置</span>
        </div>
      </div>
      <div class="more-list">
        <div class="more-item">
          <van-cell title="编辑资料" icon="edit" size="24" />
        </div>
        <div class="more-item">
          <van-cell title="退出登录" icon="replay" size="24" @click="handleLogout" />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const showMore = ref(false)
const handleBack = () => {
  router.back()
}
const handleMore = () => {
  showMore.value = true
}
const handleLogout = () => {
  showMore.value = false
  localStorage.removeItem('token')
  router.push('/login')
}
</script>

<style scoped>
.header-actions {
  display: flex;
  gap: var(--spacing-md);
}

.action-btn {
  color: var(--color-white);
  padding: var(--spacing-xs);
  border-radius: var(--radius-circle);
  background-color: var(--bg-mask);
}
.more-wrap {
  height: 100%;
  display: flex;
  background-color: var(--bg-color);
  flex-direction: column;
  padding: var(--spacing-md);
}

.more-header {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}
.more-header-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-white);
  border-radius: 28px;
}
.more-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.more-item {
}
</style>
